<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>ZBUS Monitor</title>
	<script type="text/javascript" src="?cmd=jquery"></script>
	<style>
		table {
			font-family: "Helvetica Neue", Helvetica, sans-serif
		}

		caption {
			text-align: left;
			color: silver;
			font-weight: bold;
			text-transform: uppercase;
			padding: 5px;
		}

		thead {
			background: SteelBlue;
			color: white;
		}

		th,
		td {
			padding: 5px 10px;
		}

		tbody tr:nth-child(even) {
			background: WhiteSmoke;
		}

		tbody tr td:nth-child(2) {
			text-align: center;
		}

		tbody tr td:nth-child(3),
		tbody tr td:nth-child(4) {
			text-align: right;
			font-family: monospace;
		}

		tfoot {
			background: SeaGreen;
			color: white;
			text-align: right;
		}

		tfoot tr th:last-child {
			font-family: monospace;
		}

		#slogan {
			text-align: center;
			font: bold 24px arial, sans-serif;
			margin: 30px 30px;
		}
	</style>
</head>

<body>
	<h2 id="slogan" align="center">
		ZBUS = MQ + RPC <label id="broker" style="color: orange;"></label>
	</h2>

	<script type="text/javascript">
		"use strict";
		$(function () {

			Date.prototype.Format = function (fmt) { //author: meizz 
				var o = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours(),
					"m+": this.getMinutes(),
					"s+": this.getSeconds(),
					"q+": Math.floor((this.getMonth() + 3) / 3),
					"S": this.getMilliseconds()
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
			function timeConverter(unixTime) {
				var d = new Date(unixTime);
				return d.Format("yyyy-MM-dd hh:mm:ss");
				//return d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate()+" "+d.getHours()+":"+d.getMinutes();
			}

			var MODE_MQ = 1;
			var MODE_PUBSUB = 2;
			var MODE_TEMP = 4;
			var MODE_RPC = 8;

			function mode_name(mode) {
				if ((mode & MODE_PUBSUB) != 0) return "PubSub";
				if ((mode & MODE_RPC) != 0) return "RPC";
				return "MQ";
			}

			$.getJSON('?cmd=data', function (data) {
				$("#broker").html(data.broker);

				$.each(data.mqTable, function (key, mq) {
					if (key == '@type') return;
					var link = "/" + mq.name + "/?cmd=query_mq";
					var op = "Methods";
					if ((mq.mode & MODE_RPC) == 0) {
						op = ""
					}
					$("#mq_table").append(
						"<tr>\
				<td><a target='_blank' href='" + link + "'>" + mq.name + "</a></td>\
				<td style='text-align:left;'>" + mode_name(mq.mode) + "</td>\
				<td>"+ mq.consumerCount + "</td>\
				<td>"+ mq.unconsumedMsgCount + "</td>\
				<td>0.0</td>\
				<td>"+ timeConverter(mq.lastUpdateTime) + " </td>\
				<td><a target='_blank' href='/" + mq.name + "'>" + op + "</a></td>\
			</tr>"
					);
				});
			});

		});
	</script>

	<div align="center">
		<table>
			<thead>
				<tr>
					<th>MQ</th>
					<th>Mode</th>
					<th>#Consumer</th>
					<th>#MsgInQ</th>
					<th>TPS</th>
					<th>LastUpdated</th>
					<th>Operation</th>
				</tr>
			</thead>

			<tbody id="mq_table">

			</tbody>

		</table>
	</div>
</body>

</html>